import {useState, useRef} from "react";
import Child from "@/views/study/communication/Child";

const parentStyle = {
    height: '200px',
    width: '500px',
    border: '1px solid #1890ff'
}
const Parent = () => {
    const [name, setName] = useState("哪吒");
    const [count, setCount] = useState(0);

    // 获取子组件实例
    const childRef = useRef();

    // 调用子组件的onChange方法
    const handleChange = () => {
        childRef.current.onChange();
    };

    // 获取子组件传过来的value值并设置到count，val参数就是子组件的value值
    const getChildrenValue = (val) => {
        setCount(val);
    };
    return(
        <div style={parentStyle}>
            父组件：
            <p>获取子组件传过来的值：{count}</p>
            <button onClick={handleChange}>调用子组件的change事件</button>
            <Child name={name} getCount={getChildrenValue} ref={childRef}/>
        </div>
    )
}

export default Parent